<template>
  <div>
    <!-- 第一个card接住三级联动 -->
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <CategorySelect
        @getCategorySelectid="getCategorySelectid"
        :isshowselect="scene ==0"
      >
      </CategorySelect>
    </el-card>
    <!-- 第二个card接收下面的内容 -->
    <el-card shadow="always" :body-style="{ padding: '20px' }">
     <div  v-show="scene===0">
      
 <!-- 新增按钮 -->
 <el-button :disabled="category3Id>0?false:true" type="primary" size="default" @click="addchangescene">增加spu</el-button>
      <!-- 表格展示部分 -->
      <el-table border stripe style="width: 100%" :data="list">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="spuName" label="Spu名称" width="150">
        </el-table-column>
        <el-table-column prop="description" label="Spu描述" width="width">
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="width">
          <template slot-scope="{ row, $index }">
            <div>
              <el-button
                icon="el-icon-plus"
                type="success"
                size="default"
                @click="clicksuccess(row)"
                title="添加sku"
              ></el-button>
              <el-button
                icon="el-icon-edit"
                type="warning"
                size="default"
                @click="clickwarning(row, $index)"
                title="修改spu"
              ></el-button>
              <el-button
                icon="el-icon-info"
                type="info"
                size="default"
                @click="clickinfo(row, $index)"
                title="查看spu实例"
              ></el-button>
             
            <el-popconfirm
  title="这是一段内容确定删除吗？"
  @onConfirm="clickdanger(row)"
>
<el-button
                icon="el-icon-delete"
                style="margin-left: 8px;"
                type="danger"
                size="default"
                title="删除"
                slot="reference"
              >
            </el-button>
</el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器-->
      <el-pagination
        :total="total"
        :current-page="1"
        :page-sizes="[3, 5, 8]"
        :page-size="3"
        layout=" prev, pager, next, jumper,->,total, sizes"
        style="margin-top: 20px; textalign: center"
        :page-count="3"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick"
      >
      </el-pagination>

     </div>
     <template>
      <div v-show="scene===1"  >
        <spuindex @spusendscene="spusendscene" ref="spu"> </spuindex>
      </div>
     </template>
     
     <template>
      <div v-show="scene===2">
        <skuindex ref="sku" @canclesku="canclesku" ></skuindex>
      </div>
     </template>
     <template>
      <el-dialog :title="`${dialogname}的sku列表展示`" :visible.sync="dialogTableVisible" @before-close="closedialog"
      >
  <el-table :data="gridData"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-table-column property="skuName" label="名称" width="150"></el-table-column>
    <el-table-column property="price" label="价格" width="200"></el-table-column>
    <el-table-column property="weight" label="重量"></el-table-column>
    <el-table-column property="pic" label="默认图片">
      <template slot-scope="{row,$index}">
        <div>
          <img :src="row.skuDefaultImg" :alt="row.skuName" style="width: 100px;height: 100px;">
        </div>
      </template>
    </el-table-column>
  </el-table>
</el-dialog>
     </template>
    </el-card>
  </div>
</template>
<script>
import skuindex from './skuform/index.vue'
import spuindex from './spuform/index.vue'
export default {
  name:"spu",
  data() {
    return {
      dialogTableVisible:false,//会话框的显示与隐藏
      gridData:[],//对话框数据
      dialogname:"",
      loading:true,//加载
      scene:0,
      page: 1, //代表分页器第几页
      limit: 3, //当前展示几条数据
      total: 0, //一共多少条数据
      list: [],
      isShow: true,
      attrInfo: {
        attrName: "",
        attrValueList: [],
        categoryId: 0,
        categoryLevel: 3,
      },
      category3Id: 0,
      o_obj: {},
    };
  },
  components:{
    skuindex,spuindex
  },
  methods: {
    // 发起三级联动的函数
    getCategorySelectid(oobj) {
      //子组件传递过来的 数据
      this.o_obj = JSON.parse(oobj);
      this.getCategorySelectdata();
    },
    async getCategorySelectdata() {
      this.category3Id = this.o_obj.category3Id;
      this.getPageList();
    },
    async getPageList() {
      //解构参数:page第几页,limit一页多少条数据
      const { page, limit } = this;
      //这个api要带参数:
      let result = await this.$API.spu.reqspudatalist(
        page,
        limit,
        this.category3Id
      );
      if (result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.records;
      }
    },
    //分页器的函数调用
    handleCurrentChange(pager) {
      this.page = pager;
      this.getPageList();
    },
    //每页多少条数据请求
    handleSizeChange(size) {
      this.limit = size;
      this.getPageList();
    },
    //前一页发起请求
    handlePrevClick() {
      this.page--;
      this.getPageList();
    },
    //后一页发起请求
    handleNextClick() {
      this.page++;
      this.getPageList();
    },
    //增加按钮=========zhengzaikaifa
    addchangescene(){
      this.scene = 1;
      this.$refs.spu.initaddchangescene(this.category3Id)
    },
    spusendscene(scene){
      this.scene = scene;
      this.getPageList()
    },
    //点击增加sku属性按钮
    clicksuccess(row) {
      this.scene=2;
      this.$refs.sku.getskudata(row,this.o_obj)
    },
    clickwarning(row) {
      this.scene = 1;
       this.$refs.spu.initSpuData(row);
    },
    //查看sku实例的函数回调:
    async clickinfo(row) {
      this.dialogTableVisible = true;
      this.dialogname = row.spuName;
      let result =await  this.$API.sku.seeskuinfo(row.id)
      if(result.code === 200){
        this.gridData = result.data;
        this.$message("查询成功");
        this.loading= false;
      }
    },
    //点击关闭对话框的回调函数:
    closedialog(done){
      this.loading = true;
      this.gridData = []
      done();
    },
    async clickdanger(row) {
      let result = await this.$API.spu.reqdeletedata(row.id);
      if(result.code === 200){
        this.$message({type:"success",message:"删除成功"});
      }
      if(this.list.length-1 === 0){
        this.page--;
        this.getPageList()
      }else{
        this.getPageList()
      }
    },
    //这是skuform取消按钮
    canclesku(num){
      this.scene= num
    }
  },
};
</script>
<style></style>
